<template>
	<view class="container">
		<u-form :model="form" ref="form" label-width="180">
			<view v-for="(item,index) in order" :key="index">
			<u-form-item label="☺ 粉丝昵称:" prop="contact" >
				<text style="color:#999"  >
					{{item.buyerNick}}
				</text>
			</u-form-item>
			<u-form-item label="✎ 客户姓名:">	
				<text selectable='true' style="color:#999" >
					{{item.customerName}}
				</text>
			</u-form-item>
			<u-form-item label="☎ 手机号:" >
				<text selectable='true' style="color:#999" >
					{{item.receiverMobile}}
				</text>
				<!-- prop="receiverMobile" -->
				<!-- <u-input v-model="form.receiverMobile" /> -->
			</u-form-item>
			
			<u-form-item label="✉ 商品金额:">
				<!-- 总价：goods_amount 优惠：discount 应付：receivable 已付：paid -->
				<text style="color:#999" >
					总价:{{ Number(item.goodsAmount).toFixed(2) }}&nbsp;
					优惠:{{ Number(item.discount).toFixed(2) }}
				</text>
				
			</u-form-item>
			
			<u-form-item label="✉ 订单金额:">
				<text style="color:#999" >
					应付:{{ Number(item.receivable).toFixed(2) }}&nbsp;
					已付:{{ Number(item.paid).toFixed(2) }}
				</text>
			</u-form-item>
			<!-- <u-form-item label="✉ 订单已付:">
				
			</u-form-item> -->
				
			<u-form-item label="☰ 订单状态:" >
			  <text style="color:#999" v-for="(status,staIndex) in tradeOrder" :key="staIndex">
				{{status.statusStr}}
			 </text>
			</u-form-item>
			<u-form-item label="☑ 订单地址:" >	
				<text selectable='true' style="color:#999" >
				{{item.receiverArea}}{{item.receiverAddress}}
				</text>
			</u-form-item>
			<!-- ◈ -->
			<u-form-item label="▤ 订单:" >	
				<text selectable='true' style="color:#999" >
				{{item.csRemark}}
				</text>
			</u-form-item>
			<!-- <u-form-item>
				<view style="margin-top:15px;margin-bottom:15px;">
		          <u-table>
					<u-tr class="u-tr">
			        	<u-th class="u-th">型号</u-th>
			        	<u-th class="u-th">颜色</u-th>
			        	<u-th class="u-th">单价</u-th>
			        	<u-th class="u-th">数量</u-th>
			        </u-tr>
					<u-tr class="u-tr" >
			        	<u-td class="u-td">A1</u-td>
			        	<u-td class="u-td">古铜色</u-td>
			        	<u-td class="u-td">{{Number(item.goodsAmount).toFixed(2)}}</u-td>
			        	<u-td class="u-td">{{item.goodsTypeCount}}</u-td>
					</u-tr>
		          </u-table>
		        </view>
			</u-form-item> -->
			</view>
			
		</u-form>
		<view class="bottomOpeCon">
			<view class="flex justify-center">
			<!-- <view 
			style="width:106px;"
			class="commitButton"
			@click="commitClick"
			>接单
			</view> -->
			  <view>
			  <u-button 
			   type="info"
			   size="medium"
			   shape="circle"
			   @click="commitClick"
			   plain
			   >接单
			   </u-button>
			  </view>
			  <view>
			   <u-button 
			   type="error"
			   size="medium"
			   plain
			   style="margin-left:13rpx;"
			   shape="circle"
			   @click="rejectClick">
			   拒单</u-button>
			  </view>
			  <view style="margin-left:13rpx;">
			   <u-button 
			   type="success"
			   size="medium"
			   plain
			   shape="circle"
			   @click="accomplishClick">
			   完成</u-button>
			  </view>
		    </view>
			<br/>
			<view style="margin-top:10px" class="flex justify-center">
			  <view>
				<u-button 
				type="warning"
				  size="medium"
				  plain
				  shape="circle"
				  @click="returnClick">
				退货
				</u-button>
			  </view>
			  <view style="margin-left:13rpx;">
				<u-button 
				 type="primary"
				 size="medium"
				 plain
				 shape="circle"
				 @click="comeBackClick">
				提现
				</u-button>
			  </view>
			</view>
		</view>
	</view>
</template>
<script>
import { _bookTimeRangeDict,_payTypeDict } from '@/utils/dict.js';
import { _appointPrePrice,} from '../../api/agent.js';
import baseUrl from '../../config/url.js';
import { mapActions } from 'vuex';

let bookTimeRangeDict = Object.keys(_bookTimeRangeDict).map(key => {
	return {
		label: _bookTimeRangeDict[key],
		value: key
	};
})
export default {
	data() {
		return {
			tid:'',
			tidSave:'',
			buyer:[],
			tradeOrder:[],
			order:[],
			goods:[],
			form: {
				tid:'',
				// No:"chenjianen",
				contactName: '',
				phone: '',
				payPrice:'',
				bookDate:'',
				total:'',
			},
			// 预充值金额
			appointPrePrice: '',
			payTypeDict:_payTypeDict,
		};
	},
	// onLoad:{
	//   function(option){
	//     console.log(option.id)
	//   }
	// },
	onLoad(option){
		this.getDetailById(option.tid);
		console.log(option.tid);
		this.tidSave=option.tid;
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
		this.form.customerNo = this.$store.state.user.userInfo.teamNo;
		this.form.No = this.$store.state.user.userInfo.No;
	},
	methods: {
		...mapActions({
			saveAppointOrder: 'agent/saveAppointOrder',
			getYzOrderDetailPage:'agent/getYzOrderDetailPage',
			getYzStatusOrder:'agent/getYzStatusOrder',
		}),
		getDetailById(tid){
			this.getYzOrderDetailPage(tid)
			.then(res=>{
				this.form=res.data.orderInfo;
				this.order=res.data.orderInfo;
				this.tradeOrder=res.data.tradeOrderInfo
			})
			.catch(err=>{
				console.log(err);
			})
		},
		// 电话
		makePhone(item){
			console.log(item)
			wx.makePhoneCall({
 				phoneNumber: app.globalData.item,
 			})
		},
		// 接单
		commitClick(){
			this.getYzStatusOrder({
				agent:this.$store.state.user.userInfo.teamNo,
				status:'1',
				tid:this.tidSave,
			})
			.then((res)=>{
				if(res.code=='000000'){
					uni.showToast({
						title: '接单申请已发出'
					});
				}
			})
			.catch((error)=>{
				console.log(error);
				this.$message.error(res.error);
			})
			
		},
		// 拒单
		rejectClick(){
			this.getYzStatusOrder({
				agent:this.$store.state.user.userInfo.teamNo,
				status:'2',
				tid:this.tidSave,
			})
			.then((res)=>{
				if(res.code=='000000'){
					uni.showToast({
						title: '拒单申请已发出'
					});
				}
			})
			.catch((error)=>{
				console.log(error);
				this.$message.error(res.error);
			})
			
		},
		// 完成
		accomplishClick(){
			this.getYzStatusOrder({
				agent:this.$store.state.user.userInfo.teamNo,
				status:'3',
				tid:this.tidSave,
			})
			.then((res)=>{
				if(res.code=='000000'){
					uni.showToast({
						title: '完成申请已发出'
					});
				}
			})
			.catch((error)=>{
				console.log(error);
				this.$message.error(res.error);
			})
		},
		// 退回
		returnClick(){
			this.getYzStatusOrder({
				agent:this.$store.state.user.userInfo.teamNo,
				status:'4',
				tid:this.tidSave,
			})
			.then((res)=>{
				if(res.code=='000000'){
					uni.showToast({
						title: '退货申请已发出'
					});
				}
			})
			.catch((error)=>{
				console.log(error);
				this.$message.error(res.error);
			})
		},
		// 返现
		comeBackClick(){
			this.getYzStatusOrder({
				agent:this.$store.state.user.userInfo.teamNo,
				status:'5',
				tid:this.tidSave,
			})
			.then((res)=>{
				if(res.code=='000000'){
					uni.showToast({
						title: '提现申请已发出'
					});
				}
			})
			.catch((error)=>{
				console.log(error);
				this.$message.error(res.error);
			})
		},

		fileListChange(e) {
		   this.fileList = e;
		},
	},
	created() {},
	
};
</script>

<style lang="less">
.container {
	position: relative;
	height:100%;
	padding: 12rpx 64rpx 94rpx 64rpx;
	margin-bottom: 55rpx;
	.u-delete-icon {
		width: 30rpx !important;
		height: 30rpx !important;
	}
	.commitButton{
		background-color:#000;
		color:#fff;
		width:106px;
		height:35px;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.bottomOpeCon {
	position: fixed;
	// background-color:#fff;
	height: 180rpx;
	bottom: 0;
	left: 0;
	width: 100vw;
	padding: 8rpx;
}
}


</style>
